<template>
	<view class="gl-container">
		<view class="gl-header">
			<view class="gl-header-left" style="gap: 10px; flex-wrap: wrap;">
				<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
					@confirm="refresh"></uni-search-bar>
				<checkbox-group @change="argsChange">
					<label>
						<checkbox value="showWait" :checked="showWait" style="transform:scale(0.7)" />仅查看待审
					</label>
					<label>
						<checkbox value="showBack" :checked="showBack" style="transform:scale(0.7)" />仅查看驳回
					</label>
				</checkbox-group>
			</view>
			<view class="gl-header-right">
				<!--
				<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
					@click="refresh">
					<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">刷新</text>
				</view>
				-->
			</view>
		</view>
		<view class="gl-body table-container" :style="{height:swiperH+'px'}">
			<uni-table stripe type="selection" emptyText="暂无更多数据">
				<uni-tr class="table-head">
					<uni-th align="center" width="30">ID</uni-th>
					<uni-th>用户</uni-th>
					<uni-th>姓名</uni-th>
					<uni-th width="50">性别</uni-th>
					<uni-th width="160">身份证</uni-th>
					<uni-th>状态</uni-th>
					<uni-th>审核</uni-th>
					<uni-th width="160">创建时间</uni-th>
					<uni-th width="160">审核时间</uni-th>
					<uni-th width="160">过期时间</uni-th>
					<uni-th>
						<view style="display: flex;align-items: center;gap: 10px;">
							<view class="gl-link gl-link-base" @click="refresh">刷新</view>
						</view>
					</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tmpData" :key="index">
					<uni-td>{{item.id}}</uni-td>
					<uni-td>
						<view style="display: flex;align-items: center;gap: 10px;">
							<image :src="sConf.cos + item.sub_staff.face" mode="scaleToFill"
								style="width: 40px;height: 40px;border-radius: 50% 50%;"></image>
							<text>{{item.sub_staff.nicename}}</text>
						</view>
					</uni-td>
					<uni-td>{{item.name}}</uni-td>
					<uni-td> <text>{{zipGender(item.sub_staff.gender)}}</text></uni-td>
					<uni-td>{{item.idcard}}</uni-td>
					<uni-td
						:class="{'tcBase':item.status===0,'tcSuccess':item.status===1, 'tcError':item.status===2}">{{zipState(item.status)}}</uni-td>
					<uni-td>{{item.sub_answer?.nicename || ''}}</uni-td>
					<uni-td>{{item.create}}</uni-td>
					<uni-td>{{item.lasttime}}</uni-td>
					<uni-td :class="{'tcError': zipOuttime(item.outtime)}">{{item.outtime}}</uni-td>
					<uni-td>
						<view style="display: flex;align-items: center;gap: 10px;">
							<view class="gl-link gl-link-base" @click="eventStaffInfo(item.id)">查看</view>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="gl-footer">
			<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
				@change="refresh" />
		</view>

		<!-- 模态窗口 -->
		<popStaffIdcardVue ref="popStaffIdcard" @reload="refresh"></popStaffIdcardVue>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import popStaffIdcardVue from './pop-staff-idcard.vue';
	export default {
		data() {
			return {
				swiperH: 0,
				count: 0, // 记录数
				page: 1, // 当前页
				size: 50, // 页大小		
				title: '实名认证',
				sConf: getApp().globalData,
				search: '',
				tmpData: [],
				showWait: false,
				showBack: false
			}
		},
		mounted() {
			console.log('页面挂载');
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.loadDefData()
		},
		components: {
			popStaffIdcardVue
		},
		methods: {
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 10;
					});
				})
			},
			async loadDefData() {
				this.refresh()
			},
			zipState(e) {
				if (e === 0) {
					return '待审'
				} else if (e === 1) {
					return '通过'
				} else if (e === 2) {
					return '驳回'
				} else {
					return '失效'
				}
			},
			zipGender(e) {
				return psMethod.zipGender(e)
			},
			zipOuttime(timer) {
				let timestamp = new Date(timer).getTime();
				let curstamp = Date.parse(new Date());
				return Math.ceil((timestamp - curstamp) / 1000) < 3600 * 24 * 3 ? true : false
			},
			eventStaffInfo(e) {
				console.log('eventStaffInfo', e);
				this.$refs.popStaffIdcard.open(e);
			},
			argsChange(e) {
				console.log('argsChange', e.detail.value);
				this.showWait = e.detail.value.includes("showWait") ? true : false
				this.showBack = e.detail.value.includes("showBack") ? true : false
				this.refresh()
			},
			refresh() {
				console.log('refresh');
				let host = this.sConf.host + '/admin/verifyStaff/'
				let token = this.sConf.auth.token
				let data = {
					'page': this.page,
					'size': this.size,
					'ordering': 'outtime'
				};
				if (this.search) {
					data['search'] = this.search
				}
				if (this.showWait) {
					data['status'] = 0
				}
				if (this.showBack) {
					data['status'] = 2
				}
				psMethod.authenticatorGetSync(host, token, data).then((res) => {
					console.log('请求成功', res);
					this.tmpData = res.resmsg;
					this.count = res.count;
					this.size = res.size;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tcBase {
		color: #007aff;
	}

	.tcSuccess {
		color: #4cd964;
	}

	.tcWarn {
		color: #f0ad4e;
	}

	.tcError {
		color: #dd524d;
	}

	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>